<template>
  <div class="star-rating">
    <span v-for="i in 5" :key="i" :class="['star', { filled: i <= score, half: i - 0.5 === score }]">★</span>
  </div>
</template>

<script setup>
defineProps({
  score: {
    type: Number,
    required: true,
    default: 0,
    validator: (value) => value >= 0 && value <= 5
  }
})
</script>

<style scoped>
.star-rating {
  display: inline-flex;
  align-items: center;
}

.star {
  font-size: 16px;
  color: #dcdfe6;
  margin-right: 2px;
}

.star.filled {
  color: #ffc107;
}

.star.half {
  position: relative;
  color: #dcdfe6;
}

.star.half:after {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  color: #ffc107;
  overflow: hidden;
}
</style> 